<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <style>
        #createCode {
            user-select: none;
        }

        .right {
            color: green;
            font-size: 12px;
        }

        .error {
            color: red;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- -->
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <!-- <p>
            <label for="">确&emsp;认:</label>
            <input type="text" class="repwd">
            <span class="repwd_span"></span>
        </p> -->
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
</body>
<script>
    // 1.  验证 用户名 密码 手机号 邮箱   => 失焦时验证
    // 用户名 => 整体
    //          拆开写     1. 6-12位  2. 以非数字开头   3. 由数字 字母 下划线 $组成
    // 2.  用户名 密码 手机号 邮箱  => 全都成功 => 点击注册 才能提交(alert("可以注册"))

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];

    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var btn = document.getElementsByClassName("btn")[0];

    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;



    userInp.onblur = function () {
        isUserOk = false;
        var user = userInp.value.trim();
        var lenReg = /^\S{6,12}$/;  //任意字符6-12
        var startReg = /^[^0-9]/; // 非数字开头
        var combReg = /^[\w$]{6,12}$/  // 合法组成

        if (!lenReg.test(user)) {  // 长度不符合规则  !lenReg.test(user) ==true  =>  lenReg.test(user)==false
            userSpan.textContent = "用户名需要在6-12位之间";
            userSpan.className = "user_span error";
        } else if (!startReg.test(user)) { // 开头不符合规则
            userSpan.textContent = "用户名不能以数字开头";
            userSpan.className = "user_span error";
        } else if (!combReg.test(user)) {  // 组成不符合规则
            userSpan.textContent = "用户名仅支持字母、数字、下划线和$";
            userSpan.className = "user_span error";
        } else {
            // 用户名格式全都正确的前提下判断用户有没有注册?

            /* var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistUser.php?user=" + user, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        userSpan.textContent = "√";
                        userSpan.className = "user_span right";
                        isUserOk = true;
                    } else {
                        userSpan.textContent = "用户名已注册";
                        userSpan.className = "user_span error";
                    }
                }
            } */


            $.ajax({
                type: "get",
                url: "../php/isExistUser.php",
                data: { user },
                dataType: "json",
                success: function (result) {
                    var { status, message } = result;
                    if (status) {
                        userSpan.textContent = "√";
                        userSpan.className = "user_span right";
                        isUserOk = true;
                    } else {
                        userSpan.textContent = "用户名已注册";
                        userSpan.className = "user_span error";
                    }
                }
            })




        }


    }


    // 一步到位
    pwdInp.onblur = function () {
        isPwdOk = false;
        var pwd = pwdInp.value.trim();
        var reg = /^[\w$]{6,12}$/;

        if (reg.test(pwd)) {

            var isExistNum = /[0-9]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSpe = /[_$]/.test(pwd);

            var level = isExistNum + isExistSmall + isExistBig + isExistSpe;
            pwdSpan.textContent = "密码强度:" + level;
            pwdSpan.className = "pwd_span right";
            isPwdOk = true;
        } else {
            pwdSpan.textContent = "密码仅支持字母、数字、下划线和$,6-12位";
            pwdSpan.className = "pwd_span error";
        }

    }



    phoneInp.onblur = function () {
        isPhoneOk = false;
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\d{9}$/;

        if (reg.test(phone)) {

            // 手机号格式全都正确的前提下判断当前手机有没有注册?
            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistPhone.php?phone=" + phone, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        phoneSpan.textContent = "√";
                        phoneSpan.className = "phone_span right";
                        isPhoneOk = true;
                    } else {
                        phoneSpan.textContent = "手机号已被注册!";
                        phoneSpan.className = "phone_span error";
                    }
                }
            }




        } else {
            phoneSpan.textContent = "请输入正确的手机号!";
            phoneSpan.className = "phone_span error";
        }
    }


    emailInp.onblur = function () {
        isEmailOk = false;
        var email = emailInp.value.trim();
        var reg = /^\w+@\w+\.(com|cn|email)$/;

        if (reg.test(email)) {

            // 手机号格式全都正确的前提下判断当前手机有没有注册?
            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/isExistEmail.php?email=" + email, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        emailSpan.textContent = "√";
                        emailSpan.className = "email_span right";
                        isEmailOk = true;
                    } else {
                        emailSpan.textContent = "邮箱已被注册!";
                        emailSpan.className = "email_span error";
                    }
                }
            }
        } else {
            emailSpan.textContent = "邮箱格式有误!";
            emailSpan.className = "email_span error";
        }
    }
    var count = 0;

    btn.onclick = function () {
        if (isUserOk && isPwdOk && isPhoneOk && isEmailOk) {
            // cookie默认数据库 存储数据

            var user = userInp.value;
            var pwd = pwdInp.value;
            var phone = phoneInp.value;
            var email = emailInp.value;


            /* var xhr = new XMLHttpRequest();

            xhr.open("post", "../php/register.php", true);

            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(`user=${user}&pwd=${pwd}&email=${email}&phone=${phone}`);

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = xhr.responseText;
                    result = JSON.parse(result);
                    console.log(result);

                    var { status, message } = result;

                    if (status) {
                        location.href = "./login.html";
                    } else {
                        alert(message);
                    }
                }
            } */


            $.ajax({
                type: "post",
                url: "../php/register.php",
                data: { user, pwd, phone, email },
                dataType: "json",
                success: function (result) {
                    var { status, message } = result;
                    if (status) {
                        location.href = "./login.html";
                    } else {
                        alert(message);
                    }
                }
            })

        }
    }

</script>

</html>